<template>
    <div class="course">
        <p style="color: #606266; font-size: 14px;">
            <i class="el-icon-s-home"></i>
            <span>&nbsp;成绩录入</span>
        </p>

        <el-card class="box-card" :body-style="{ padding: '10px 25px' }">
            <div class="header">
                <div style="width: 400px; display: flex;">
                    <el-input placeholder="课程名" size="medium" v-model="courseName"
                        style="margin-right: 20px;"></el-input>
                    <el-input placeholder="学生名" size="medium" v-model="studentName"
                        style="margin-right: 20px;"></el-input>
                    <el-button class="el-icon-search" type="primary" @click="search" size="medium">搜索</el-button>
                </div>
            </div>

            <div style="text-align: center;">
                <el-pagination background @current-change="handleCurrentChange" :current-page.sync="page"
                    :page-size="10" layout=" prev, pager, next" :total="total">
                </el-pagination>
            </div>

            <el-table :data="tableData" stripe style="width: 100%" max-height="540px" v-loading="loading">
                <el-table-column prop="studentCourseId" label="选课Id">
                </el-table-column>
                <el-table-column prop="courseName" label="课程名">
                </el-table-column>
                <el-table-column prop="studentName" label="学生姓名">
                </el-table-column>
                <el-table-column prop="dailyScore" label="日常分">
                </el-table-column>
                <el-table-column prop="examScore" label="笔试分">
                </el-table-column>
                <el-table-column prop="score" label="成绩">
                </el-table-column>
                <el-table-column label="操作" width="150px">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini"
                            @click="showMark(scope.row.studentCourseId)">打分</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <Marking @cancelMarking="handleCancel" @close="handleClose" :key="dialogFormVisible" :id="markingId">
            </Marking>
        </el-dialog>
    </div>
</template>

<script>
import Marking from '@/components/teacher/Marking.vue';
import { submitScoreList, submitScoreNum } from '@/api/teacher/course';
export default {
    components: { Marking },
    data() {
        return {
            tableData: [],
            page: 1,
            total: 0,
            courseName: "",
            studentName: "",
            dialogFormVisible: false,
            markingId: "",
            loading: false
        }
    },
    methods: {
        handleCancel() {
            this.dialogFormVisible = false
        },
        handleClose() {
            this.dialogFormVisible = false
            this.getList()
        },
        showMark(id) {
            this.dialogFormVisible = true
            this.markingId = id
        },
        handleCurrentChange(val) {
            this.page = val
            this.getList()
        },
        getPageCount() {
            let params = {
                courseName: this.courseName,
                studentName: this.studentName
            }
            submitScoreNum(params).then(res => {
                if (res.code === 0) {
                    this.total = res.data * 10
                }
            })
        },
        getList() {
            this.loading = true
            let params = {
                courseName: this.courseName,
                studentName: this.studentName
            }
            submitScoreList(params, this.page).then(res => {
                console.log(res)
                if (res.code === 0) {
                    this.tableData = res.data
                }
            }).finally(() => {
                this.loading = false
            })
        },
        search() {
            this.page = 1
            this.getList()
            this.getPageCount()
        },
    },
    mounted() {
        this.getPageCount()
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.course {
    height: 100%;

    .box-card {
        width: 100%;
        margin-top: 5px;
        font-size: 14px;

        .header {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 10px;

        }
    }
}
</style>